<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Dialog } from 'vant';
import 'vant/es/dialog/style';
import { Notify } from 'vant';
import 'vant/es/notify/style';

import { BASE, BOND } from "../common/commonAjax";

const VanDialog = Dialog.Component;
const active = ref(0);
const activeName1 = ref('');
const activeName2 = ref('');
const addBondPage = ref(false)
const bondList = ref([])
const baseInfo = ref({})
const submitData = ref({
  bondReason: "",
  templateName: "",
  templateId: "",
  userId: "easy"
})

onMounted(() => {
  selectBondList();
  selectBaseInfo();
});

const selectBondList = () => {
  BOND.LIST({}).then((response: any) => {
    bondList.value = response.data.data;
  }).catch((error: any) => {
    console.error(error);
  });
};
const selectBaseInfo = () => {
  BASE.INFO({ userId: 'easy' }).then((response: any) => {
    baseInfo.value = response.data.data;
  }).catch((error: any) => {
    console.error(error);
  });
};
const useBond = (bondId: string, bondName: String) => {
  Dialog.confirm({
    message: `确定要使用一张【${bondName}】吗？只有和TA商量好了才能使用。`,
  })
    .then(() => {
      BOND.USE({ bondId: bondId }).then((response: any) => {
        if (response.data.code !== '0000') Notify({ type: 'warning', message: response.data.data });
        else {
          Notify({ type: 'warning', message: "用掉了一张宝贵的券" });
          selectBaseInfo();
        }
      }).catch((error: any) => {
        console.error(error);
      });
    })
};
const allowBond = (bondId: string, bondName: String, bondState: number) => {
  let message = `确定允许TA用一张【${bondName}】吗？`;
  if (bondState === 2) message = "确定要撤回，先不让TA用吗？"
  Dialog.confirm({ message: message })
    .then(() => {
      BOND.ALLOW_USE({ bondId: bondId }).then((response: any) => {
        if (response.data.code !== '0000') Notify({ type: 'warning', message: response.data.data });
        else {
          let message = `允许对方使用一张【${bondName}】。`;
          if (bondState === 2) message = "已经撤回了，先不让TA用。"
          Notify({ type: 'warning', message: message });
          selectBaseInfo();
        }
      }).catch((error: any) => {
        console.error(error);
      });
    })
};

const addBond = () => {
  console.log("sdafasdf")
  BOND.ADD(submitData.value).then((response: any) => {
    if (response.data.code !== '0000') Notify({ type: 'warning', message: response.data.data });
    else {
      Notify({ type: 'warning', message: "给对方添加了一张宝贵的券" });
      submitData.value.bondReason = "";
      selectBaseInfo();
    }
  }).catch((error: any) => {
    console.error(error);
  });
}

</script>

<template>
  <van-row gutter="20">
    <van-col span="8" v-for="bond in bondList" :key="bond.templateId">
      <van-button round type="warning" class="bonds" @click="addBondPage = true; submitData.templateName = bond.templateName; submitData.templateId = bond.templateId;">{{ bond.templateName }}</van-button>
    </van-col>
  </van-row>
  <van-divider style="margin-top: 2rem;" />
  <van-row>
    <van-tabs v-model:active="active" style="width: 100%;">
      <van-tab title="我">
        <van-collapse v-model="activeName1" accordion v-for="bond in baseInfo.ownerBonds" :key="bond.bondId" style="padding: 0.5rem 0;">
          <van-collapse-item :title="bond.bondName + (bond.bondState === 3 ? '(已使用)' : '')" :name="bond.bondId">
            <p>{{ bond.bondReason }}</p>
            <van-button :color="(bond.bondState === 3 ? '#BEBEBE' : '#CD8500')" style="width: 100%;height: auto;padding: 0.3rem;" @click="useBond(bond.bondId, bond.bondName)" :disabled="bond.bondState === 3">我要用</van-button>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
      <van-tab title="TA">
        <van-collapse v-model="activeName2" accordion v-for="bond in baseInfo.issuerBonds" :key="bond.bondId" style="padding: 0.5rem 0;">
          <van-collapse-item :title="bond.bondName" :name="bond.bondId">
            <p>{{ bond.bondReason }}</p>
            <van-button :color="(bond.bondState === 3 ? '#BEBEBE' : '#CD8500')" style="width: 100%;height: auto;padding: 0.3rem;" @click="allowBond(bond.bondId, bond.bondName, bond.bondState)" :disabled="bond.bondState === 3">
              {{ bond.bondState === 2 ? "后悔了，别用了" : "让TA用" }}
            </van-button>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
    </van-tabs>
  </van-row>
  <van-dialog v-model:show="addBondPage" :title="`为什么要给对方一张【${submitData.templateName}】呢？`" show-cancel-button @confirm="addBond">
    <van-cell-group inset>
      <van-field v-model="submitData.bondReason" rows="2" autosize type="textarea" maxlength="50" placeholder="简要描述给对方这张券的原因" show-word-limit />
    </van-cell-group>
  </van-dialog>
</template>

<style scoped>
.bonds {
  width: 110%;
  white-space: nowrap;
}
</style>
